
import React, { useState } from 'react';
import Components from 'Components';
const { Base, ComponentPage } = Components;

export default (props) => {
    const { property, view, pageId, pageAxis } = Base.getProps(props);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.isEdit = true;
    property.isView = true;
    property.setValueByData = (d) => {
        if (!d.MeetingId) return;

        if (!property.isInit) {
            property.data = d;
            return;
        }

        !property.title && d.Title && property.setTitle(d.Title);
        const { DisplayIndex } = pageAxis.visitUser;
        property.setName && property.setName(d.UserName || ('设备' + DisplayIndex));
        property.setHeadImgVisible && property.setHeadImgVisible(true);
        d.StatusName && property.setStatusName(d.StatusName);
    };

    if (!isVisible) return null;

    const { isBackground, title, isUserName } = property;

    property.expandInit = () => {
        const meeting_title = pageAxis.getViewProperty(property, 'meeting_title');
        meeting_title.text = title || pageAxis.pageData.title;
        property.setTitle = (t) => meeting_title.setValue(t);
        const toback = pageAxis.getViewProperty(property, 'toback');
        if (pageAxis.toBackAction) toback.eventActionName = pageAxis.toBackAction;

        property.isInit = true;

        if (property.data && !meeting_title.text) meeting_title.text = property.data.Title;

        property.setStatusName = (name) => {
            const meeting_status = pageAxis.getViewProperty(property, 'meeting_status');
            const [dit, status_name] = meeting_status.properties;
            status_name.text = name;
            if (name === '未开始' || name.indexOf('语音转写已结束') >= 0) meeting_status.style.backgroundColor = "#fc5c63";
            else if (name === '已结束') {
                meeting_status.style.backgroundColor = "#E7F6FF";
                status_name.spanStyle.color = '#5E6984';
                dit.style.backgroundColor = '#5E6984';
            }
            else if (name.indexOf('语音转写已暂停') >= 0) {
                meeting_status.style.backgroundColor = "#c6c628";
            }
            else meeting_status.style.backgroundColor = "#1CCF28";
            meeting_status.setIsVisible && meeting_status.setIsVisible(true);
            meeting_status.isVisible = true;
            meeting_status.refresh && meeting_status.refresh();
            status_name.setValue && status_name.setValue(name);
        };

        pageAxis.setHeaderStatusName = (name) => {
            name = name === 'paused' ? '语音转写已暂停' : '语音转写进行中';
            property.setStatusName(name);
        };

        if (property.data && property.data.StatusName) property.setStatusName(property.data.StatusName);

        if (isUserName) {
            const userName = pageAxis.getViewProperty(property, 'userName');
            userName.text = pageAxis.pageData.userName;
            const headImgUrl = pageAxis.getViewProperty(property, 'headImgUrl');
            headImgUrl.isVisible = !!userName.text;
            property.setName = (v) => {
                userName.setValue(v);
                pageAxis.setUserName(v);
            };
            property.setHeadImgVisible = (v) => headImgUrl.setIsVisible(v);

            if (property.data) {
                const { DisplayIndex } = pageAxis.visitUser;
                userName.text = property.data.UserName || ('设备' + DisplayIndex);
                headImgUrl.isVisible = true;
                pageAxis.setUserName(userName.text);
            }
        }
        else {
            const userinfo_view = pageAxis.getViewProperty(property, 'userinfo_view');
            userinfo_view.properties = [];
            userinfo_view.isButton = false;
            userinfo_view.linkUrl = '';
        }

        if (!isBackground) {
            const top_view = pageAxis.getViewProperty(property, 'top_view');
            delete top_view.style.background;
        }
    };

    return <ComponentPage property={property} view={view} pageId={pageId} />;
};